<!--
 *                                                     __----~~~~~~~~~~~------___
 *                                    .  .   ~~//====......          __--~ ~~
 *                    -.            \_|//     |||\\  ~~~~~~::::... /~
 *                 ___-==_       _-~o~  \/    |||  \\            _/~~-
 *         __---~~~.==~||\=_    -_--~/_-~|-   |\\   \\        _/~
 *     _-~~     .=~    |  \\-_    '-~7  /-   /  ||    \      /
 *   .~       .~       |   \\ -_    /  /-   /   ||      \   /
 *  /  ____  /         |     \\ ~-_/  /|- _/   .||       \ /
 *  |~~    ~~|--~~~~--_ \     ~==-/   | \~--===~~        .\
 *           '         ~-|      /|    |-~\~~       __--~~
 *                       |-~~-_/ |    |   ~\_   _-~            /\
 *                            /  \     \__   \/~                \__
 *                        _--~ _/ | .-~~____--~-/                  ~~==.
 *                       ((->/~   '.|||' -_|    ~~-/ ,              . _||
 *                                  -_     ~\      ~~---l__i__i__i--~~_/
 *                                  _-~-__   ~)  \--______________--~~
 *                                //.-~~~-~_--~- |-------~~~~~~~~
 *                                       //.-~~~--\
 *                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 
 *                               神兽保佑            永无BUG
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类管理</title>
    <link rel="stylesheet" href="/static/admin/pear/css/pear.css" />
</head>

<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="" class="layui-input">
                    </div>
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="category-table" lay-filter="category-table"></table>
        </div>
    </div>

    <script type="text/html" id="category-toolbar">
        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
        <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
        <button class="pear-btn pear-btn-md" lay-event="recycle">
        <i class="layui-icon layui-icon-delete"></i>
        回收站
    </button>

        <button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
	    <i class="layui-icon layui-icon-spread-left"></i>
	    展开
	</button>
        <button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
	    <i class="layui-icon layui-icon-shrink-right"></i>
	    折叠
	</button>
    </script>

    <script type="text/html" id="category-bar">
        <button class="pear-btn  pear-btn-sm" lay-event="se"><i class="layui-icon layui-icon-release"></i></button>
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
    </script>


    <script src="/static/admin/layui/layui.js"></script>
    <script src="/static/admin/pear/pear.js"></script>
    <script>
        layui.use(['table', 'form', 'jquery', 'treetable'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let treetable = layui.treetable;

            let MODULE_PATH = "../article.category/";

            window.render = function () {
                treetable.render({
                    treeColIndex: 1,
                    treeSpid: 0,
                    treeIdName: 'id',
                    treePidName: 'fid',
                    skin: 'line',
                    method: 'post',
                    treeDefaultClose: true,
                    toolbar: '#category-toolbar',
                    elem: '#category-table',
                    url: '../article.category/index',
                    page: false,
                    cols: [
                        [{
                            type: 'checkbox'
                        }, {
                            field: 'id',
                            minWidth: 80,
                            title: 'id'
                        }, {
                            field: 'name',
                            minWidth: 200,
                            title: '分类名称'
                        }, {
                            field: 'seo_title',
                            minWidth: 200,
                            title: 'seo标题'
                        }, {
                            field: 'seo_alias',
                            minWidth: 200,
                            title: 'seo别名'
                        }, {
                            title: '操作',
                            templet: '#category-bar',
                            width: 150,
                            align: 'center'
                        }]
                    ]
                });
            }

            render();
            form.on('submit(query)', function (data) {
                layer.msg('刷新')
                table.reload('category-table', {
                    url: '../article.category/index',
                    where: data.field,
                    page: { curr: 1 }
                })
                return false;
            })
            table.on('tool(category-table)', function (obj) {
                if (obj.event === 'remove') {
                    window.remove(obj);
                } else if (obj.event === 'edit') {
                    window.edit(obj);
                } else if (obj.event === 'se') {
                    var url=obj.url;
                    if(!url){
                        layer.msg('后端没有配置url',{
                            icon:2
                        })
                        return false
                    }
                    window.open(url);
                }
            })

            table.on('toolbar(category-table)', function (obj) {
                if (obj.event === 'add') {
                    window.add();
                } else if (obj.event === 'refresh') {
                    window.refresh();
                } else if (obj.event === 'batchRemove') {
                    window.batchRemove(obj);
                } else if (obj.event === 'expandAll') {
                    treetable.expandAll("#category-table");
                } else if (obj.event === 'foldAll') {
                    treetable.foldAll("#category-table");
                } else if (obj.event === 'recycle') {
                    window.recycle(obj);
                }
            });

            window.add = function () {
                layer.open({
                    type: 2,
                    title: '新增',
                    shade: 0.1,
                    area: ['450px', '500px'],
                    content: MODULE_PATH + 'add.html'
                });
            }

            window.edit = function (obj) {
                console.log(obj)
                layer.open({
                    type: 2,
                    title: '修改',
                    shade: 0.1,
                    area: ['450px', '500px'],
                    content: MODULE_PATH + 'edit?id='+obj.data.id
                });
            }

            window.remove = function (obj) {
                layer.confirm('确定要删除该分类吗', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    layer.close(index);
                    let loading = layer.load();
                    $.ajax({
                        url: MODULE_PATH + "del?id=" + obj.data['id'],
                        dataType: 'json',
                        type: 'delete',
                        success: function (result) {
                            layer.close(loading);
                            if (result.code == 0) {
                                layer.msg(result.msg, {
                                    icon: 1,
                                    time: 1000
                                }, function () {
                                    obj.del();
                                });
                            } else {
                                layer.msg(result.msg, {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        }
                    })
                });
            }
            window.batchRemove = function (obj) {
                let data = table.checkStatus(obj.config.id).data;
                if (data.length === 0) {
                    layer.msg("未选中数据", {
                        icon: 3,
                        time: 1000
                    });
                    return false;
                }
                var ids = []
                var hasCheck = table.checkStatus('category-table')
                var hasCheckData = hasCheck.data
                if (hasCheckData.length > 0) {
                    $.each(hasCheckData, function (index, element) {
                        ids.push(element.id)
                    })
                }
                layer.confirm('确定要批量删除该分类', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    layer.close(index);
                    let loading = layer.load();
                    $.ajax({
                        url: "delall",
                        data: {
                            ids: ids
                        },
                        dataType: 'json',
                        type: 'POST',
                        success: function (res) {
                            layer.close(loading);
                            //判断有没有权限
                            if (res && res.code == 999) {
                                layer.msg(res.msg, {
                                    icon: 5,
                                    time: 2000,
                                })
                                return false;
                            } else if (res.code == 0) {
                                layer.msg(res.msg, {
                                    icon: 1,
                                    time: 1000
                                }, function () {
                                    table.reload('category-table');
                                });
                            } else {
                                layer.msg(res.msg, {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        }
                    })
                });
            }
            window.refresh = function () {
                table.reload('category-table');
            }
            if (typeof width !== 'number' || width === 0) {
                width = $(window).width() * 0.8;
            }
            if (typeof height !== 'number' || height === 0) {
                height = $(window).height() - 20;
            }
            window.recycle = function () {
                layer.open({
                    type: 2,
                    title: '回收站',
                    shade: 0.1,
                    area: [width + 'px', height + 'px'],
                    content: MODULE_PATH + 'recycle',
                    cancel: function () {
                        table.reload('category-table');
                    }
                });
            }
           
           
          

        })
    </script>
</body>

</html>